<!--
 * @Author: Bo Cai
 * @Mail: caibo0520@qq.com
 * @Date: 2021-11-20 14:42:29
 * @LastEditors: Bo Cai
 * @LastEditTime: 2021-12-26 01:37:18
-->
<template>
  <div class="sign-up-container" id="userInfo">
    <section class="container">
      <header class="comm-title">
        <h2 class="fl tac">
          <span class="c-333">基本信息</span>
        </h2>
      </header>
      <el-form ref="form" :model="userForm">
        <el-row :gutter="30">
          <el-col :span="4">
            <el-form-item
              label="昵称"
              label-width="50px"
              class="input-prepend restyle"
              prop="nickname"
              :rules="[
                {
                  required: true,
                  message: '请输入你的昵称',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input type="text" v-model="userForm.nickname"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item
              label="性别"
              label-width="50px"
              class="input-prepend restyle"
              prop="sex"
              :rules="[
                {
                  required: true,
                  message: '请输入你的性别',
                  trigger: 'blur',
                },
              ]"
            >
              <el-select v-model="userForm.sex" placeholder="请选择性别">
                <el-option label="女" :value="0"></el-option>
                <el-option label="男" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item
              label="专业"
              label-width="50px"
              class="input-prepend restyle"
              prop="major"
              :rules="[
                {
                  required: true,
                  message: '请输入你的专业',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input type="text" v-model="userForm.major"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item
              label="出生日期"
              label-width="80px"
              class="input-prepend restyle"
              prop="birthday"
              :rules="[
                {
                  required: true,
                  message: '请输入你的出生日期',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input type="date" v-model="userForm.birthday"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item
              label="邮箱"
              label-width="50px"
              class="input-prepend restyle no-radius"
              prop="mail"
              :rules="[
                {
                  required: true,
                  message: '请输入邮箱',
                  trigger: 'blur',
                },
                { validator: checkMail, trigger: 'blur' },
              ]"
            >
              <el-input type="text" v-model="userForm.mail"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item
              label="个性签名"
              label-width="80px"
              class="input-prepend restyle"
              prop="sign"
              :rules="[
                {
                  required: true,
                  message: '请输入你的签名',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input
                type="textarea"
                v-model="userForm.sign"
                rows="4"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item
              label="头像"
              label-width="50px"
              class="input-prepend restyle"
              prop="avatar"
              :rules="[
                {
                  required: true,
                  message: '请上传您的头像',
                  trigger: 'blur',
                },
              ]"
            >
              <div>
                <el-upload
                  class="avatar-uploader"
                  :action="baseUrl + '/admin/oss/file/upload?host=cover'"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    v-if="userForm.avatar"
                    :src="userForm.avatar"
                    class="avatar"
                  />
                  <el-icon v-else class="el-icon-plus avatar-uploader-icon"
                    ><plus
                  /></el-icon>
                </el-upload>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col>
            <div class="center submit-btn">
              <el-button type="primary" @click="onSubmit"
                >更改个人信息</el-button
              >
            </div>
          </el-col>
        </el-row>
      </el-form>
      <header class="comm-title">
        <h2 class="fl tac">
          <span class="c-333">课程进度</span>
        </h2>
      </header>
      <el-form>
        <el-form-item v-if="courseProgress.length > 0">
          <div v-for="progress in courseProgress" :key="progress.course.id">
            <a
              :href="'/course/' + progress.course.id"
              target="_blank"
              class="course-link"
              >{{ progress.course.title }}</a
            >&nbsp; <span>总课程数：{{ progress.course.lessonNum }}</span
            >&nbsp; <span>可学课时数：{{ progress.total }}</span
            >&nbsp;
            <span>已学课程数：{{ progress.learned }}</span>
            <el-progress
              v-if="progress.learned < progress.total"
              :text-inside="true"
              :stroke-width="26"
              :percentage="
                ((progress.learned / progress.total) * 100) | numFilter
              "
            ></el-progress>
            <el-progress
              v-if="progress.learned == progress.total"
              :text-inside="true"
              :stroke-width="26"
              :percentage="100"
              status="success"
            ></el-progress>
          </div>
        </el-form-item>
        <el-form-item v-if="courseProgress.length == 0" class="no-data-wrap">
          <em class="icon30 no-data-ico">&nbsp;</em>
          <span class="c-666 fsize14 ml10 vam"
            >您还没有开始学习课程，暂时查询不到相关数据...</span
          >
        </el-form-item>
      </el-form>
    </section>
  </div>
</template>

<script>
import loginApi from '@/api/login'
import ucenterApi from '@/api/ucenter'
import courseLearnApi from '@/api/course_learn'
import cookie from 'js-cookie'

export default {
  data() {
    return {
      userForm: {},
      courseProgress: [],
      baseUrl: '',
    }
  },
  created() {
    this.getCoursesProgress()
    this.findUserInfo()
    this.baseUrl = process.env.baseUrl
  },
  methods: {
    toCourse(courseId) {
      window.location.href = '/course/' + courseId
    },
    getCoursesProgress() {
      // 获取当前用户的学习进度
      courseLearnApi
        .getTotalLearnProgress()
        .then((response) => {
          this.courseProgress = response.data.data.items
        })
        .catch((error) => {
          this.$message.error(error)
        })
    },
    onSubmit() {
      ucenterApi
        .updateById(this.userForm)
        .then((response) => {
          // 更新本地的cookie信息，并且刷新，使头像更改生效
          loginApi.getLoginInfo().then((response) => {
            this.loginInfo = response.data.data.loginInfo
            //将用户信息记录cookie
            cookie.set('guli_ucenter', this.loginInfo, {
              domain: 'localhost',
            })
          })
          this.$message.success('个人信息修改成功，头像将在刷新页面后生效！')
        })
        .catch((error) => {
          this.$message.error('个人信息修改失败：' + error)
        })
    },
    findUserInfo() {
      //调用接口 根据token获取用户信息，为了首页面显示
      loginApi.getLoginInfo(cookie.get('guli_token')).then((response) => {
        this.userForm = response.data.data.loginInfo
      })
    },
    handleAvatarSuccess(res, file) {
      this.userForm.avatar = res.data.url
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('Avatar picture size can not exceed 2MB!')
      }
      return isLt2M
    },
    // 校验邮箱
    checkMail(rule, value, callback) {
      //debugger
      if (
        !/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(
          value
        )
      ) {
        return callback(new Error('邮箱格式不正确'))
      }
      return callback()
    },
  },
  filters: {
    numFilter(value) {
      let realVal = ''
      if (!isNaN(value) && value !== '') {
        // 截取当前数据到小数点后两位
        realVal = parseFloat(value).toFixed(2)
      } else {
        realVal = '--'
      }
      return realVal
    },
  },
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 140px;
  height: 140px;
  text-align: center;
}
.avatar-uploader-icon svg {
  margin-top: 35px; /* (178px - 28px) / 2 - 1px */
}
.avatar {
  width: 118px;
  height: 118px;
  display: block;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.center {
  text-align: center;
}
.left {
  text-align: left;
}
.course-link {
  text-decoration: underline;
  font-weight: bold;
  color: #409eff;
}
.tableTitle {
  position: relative;
  margin: 0 auto;
  width: 600px;
  height: 1px;
  background-color: #d4d4d4;
  text-align: center;
  font-size: 16px;
  color: rgba(101, 101, 101, 1);
}
.midText {
  position: absolute;
  left: 50%;
  background-color: #ffffff;
  padding: 0 15px;
  transform: translateX(-50%) translateY(-50%);
}
</style>